import React, {Component} from 'react';
import {Relax, msg} from 'iflux2';
import classNames from 'classnames';
import {Row, Col, Select, Input, Form, Button} from 'antd';
const Option = Select.Option;

import AdvancedSearch from './advanced-search';
import {SimpleOptions} from '../constant/options';

import noop from 'util/noop';
@Relax
export default class SearchAlias extends Component {
    static defaultProps = {
        type: "sales",
        resetPagination:noop,
        changeSearchParams:noop,
        queryOrderList:noop,
    }
    render(){
        return <Search {...this.props} />
    }
}
class Search extends Component {

    constructor(props) {
        super(props);

        this.state = {
            expand: false
        }
    }

    componentDidMount() {
        msg.on("page_changed",() => {
            this.props.form.resetFields();
        })
    }


    render() {
        const {form: {getFieldDecorator, getFieldValue}} = this.props;
        const {expand} = this.state;

        const btnCls = classNames('ant-search-btn simple-search-btn', {
            'ant-search-btn-noempty': !!getFieldValue('simpleValue')
        });

        const searchFormCls = classNames('search-form', {
            'show-advance': expand,
        });

        const simpleTypeField = getFieldDecorator('simpleType', {
            initialValue: 'tid'
        })(
            <Select className="percent100"
                    size="large">
                {
                    SimpleOptions.map(option=><Option {...option}>{option.text}</Option>)
                }
            </Select>
        );

        const simpleValueField = getFieldDecorator('simpleValue')(
            <Input size="large"
                   onPressEnter={()=>this.query()}/>
        );

        return (
            <Form className={searchFormCls}>
                <div className="simple-search">
                    <div className="ant-search-input-wrapper">
                        <Row className="search-select">
                            <Col span="6" className="search-item">
                                <Row className="select-and-input">
                                    <Col span="8">{simpleTypeField}</Col>
                                    <Col span="16">{simpleValueField}</Col>
                                    <Button icon="search"
                                            className={btnCls}
                                            onClick={this.query} />
                                </Row>
                            </Col>
                        </Row>
                    </div>
                    <a className="search-advance-switch" href="javascript:void(0);" onClick={this.changeExpand}>高级搜索</a>
                </div>
                <AdvancedSearch form={this.props.form}
                                type={this.props.type}
                                changeExpand={()=>this.changeExpand()}
                                onSearch={this.query}/>
            </Form>
        )
    }


    /**
     * 点击回车键查询订单列表
     */
    query = ()=>{
        const {range_picker, simpleType, simpleValue, ...rest} = this.props.form.getFieldsValue();
        const {expand} = this.state;

        //组装查询参数
        let params = {};
        if (expand) {//高级搜索
            params = Object.assign(params, rest, {
                startTime: range_picker && range_picker.length ? range_picker[0].startOf('day').format('YYYY-MM-DD HH:mm:ss') : '',
                endTime: range_picker && range_picker.length ? range_picker[1].endOf('day').format('YYYY-MM-DD HH:mm:ss') : '',
            })
        } else {//简单搜索
            params = Object.assign(params, {
                [simpleType]: simpleValue
            })
        }
        //查询列表
        this.props.changeSearchParams(params);
        this.queryOrderList();
    }

    /**
     * 高级/简单搜索切换
     */
    changeExpand = ()=>{
        this.setState({
            expand: !this.state.expand
        })
    }

    getExpand = ()=>{
        return this.state.expand;
    }


    /**
     * 查询订单列表
     * @param params
     */
    queryOrderList = ()=>{
        const {resetPagination, queryOrderList} = this.props;
        this.setLoading(true);
        //搜索前重置分页信息
        resetPagination();
        //查询列表
        queryOrderList().then(()=>{
            this.setLoading(false);
        }).catch(()=>{
            this.setLoading(false);
        });
    }

    setLoading = (loading)=>{
        msg.emit('setLoading', loading);
    }
}

Search = Form.create()(Search)